<script setup lang="ts">
import {onMounted} from 'vue'
//使用counterStore
//1.导入一个use打头的方法
import { useCounterStore } from './store/counterStore'
import { useChannelStore } from './store/channelStore'
import { storeToRefs } from 'pinia'
//2.执行方法得到store实例对象
const counterStore = useCounterStore()
const channelStore = useChannelStore()
// console.log(counterStore)
console.log(channelStore)
//触发异步action
onMounted(() => channelStore.getList())

//使用storeToRefs进行解构赋值（只能支持state/getters，方法不用这个storeToRefs，方法可以直接解构）
const { count, doubleCount } = storeToRefs(counterStore)
const { increment } = counterStore
</script>

<template>
  <div>
    <button @click="increment">{{ count }}</button>
    getter: {{ doubleCount }}
    <ul>
      <li v-for="item in channelStore.list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>
